<template>
  <div class="search-results-page">
    <!-- 页面头部 -->
    <section class="page-header bg-light py-4">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-8">
            <h1 class="h3 mb-2">搜索结果</h1>
            <p class="text-muted mb-0">找到 {{ searchResults.length }} 个相关结果</p>
          </div>
          <div class="col-md-4">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="继续搜索..." v-model="searchQuery">
              <button class="btn btn-primary" @click="performSearch">
                <i class="fas fa-search"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="container mt-4">
      <div class="row">
        <!-- 筛选侧边栏 -->
        <div class="col-lg-3 mb-4">
          <div class="card">
            <div class="card-body">
              <h6 class="card-title mb-3">筛选结果</h6>
              
              <!-- 结果类型 -->
              <div class="filter-group mb-3">
                <h6 class="small fw-bold mb-2">类型</h6>
                <div class="form-check" v-for="type in resultTypes" :key="type.value">
                  <input class="form-check-input" 
                         type="checkbox" 
                         :id="`type-${type.value}`"
                         :value="type.value"
                         v-model="filters.types">
                  <label class="form-check-label small" :for="`type-${type.value}`">
                    {{ type.label }}
                  </label>
                </div>
              </div>

              <!-- 评分筛选 -->
              <div class="filter-group">
                <h6 class="small fw-bold mb-2">最低评分</h6>
                <div class="d-flex align-items-center">
                  <input type="range" class="form-range" min="0" max="5" step="0.5" v-model="filters.minRating">
                  <span class="ms-2 text-primary fw-bold small">{{ filters.minRating }}+</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 搜索结果 -->
        <div class="col-lg-9">
          <!-- 排序选项 -->
          <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="btn-group">
              <button v-for="sort in sortOptions" 
                      :key="sort.value"
                      class="btn btn-outline-secondary btn-sm"
                      :class="{ active: sortBy === sort.value }"
                      @click="sortBy = sort.value">
                {{ sort.label }}
              </button>
            </div>
            <div class="text-muted small">
              显示 {{ paginatedResults.length }} 个结果
            </div>
          </div>

          <!-- 结果列表 -->
          <div v-if="filteredResults.length > 0">
            <div v-for="result in paginatedResults" :key="result.id" class="card mb-3">
              <div class="card-body">
                <div class="row align-items-center">
                  <div class="col-md-2">
                    <img :src="result.image" :alt="result.title" class="img-fluid rounded" style="height: 80px; object-fit: cover;">
                  </div>
                  <div class="col-md-8">
                    <h5 class="card-title mb-1">{{ result.title }}</h5>
                    <p class="card-text text-muted small mb-2">{{ result.description }}</p>
                    <div class="d-flex flex-wrap gap-2">
                      <span class="badge bg-primary">{{ result.type }}</span>
                      <Rating :rating="result.rating" :size="'small'" />
                      <small class="text-muted">{{ result.location }}</small>
                    </div>
                  </div>
                  <div class="col-md-2 text-end">
                    <button class="btn btn-primary btn-sm" @click="viewDetail(result)">
                      查看详情
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <nav v-if="totalPages > 1" class="mt-4">
              <ul class="pagination justify-content-center">
                <li class="page-item" :class="{ disabled: currentPage === 1 }">
                  <button class="page-link" @click="changePage(currentPage - 1)">上一页</button>
                </li>
                <li v-for="page in pages" :key="page" 
                    class="page-item" 
                    :class="{ active: page === currentPage }">
                  <button class="page-link" @click="changePage(page)">{{ page }}</button>
                </li>
                <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                  <button class="page-link" @click="changePage(currentPage + 1)">下一页</button>
                </li>
              </ul>
            </nav>
          </div>

          <!-- 无结果 -->
          <div v-else class="text-center py-5">
            <i class="fas fa-search fa-3x text-muted mb-3"></i>
            <h5>没有找到相关结果</h5>
            <p class="text-muted">请尝试其他搜索关键词</p>
            <router-link to="/cities" class="btn btn-primary">浏览所有城市</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Rating from '@/components/ui/Rating.vue'

export default {
  name: 'SearchResults',
  components: {
    Rating
  },
  data() {
    return {
      searchQuery: '',
      sortBy: 'relevance',
      currentPage: 1,
      itemsPerPage: 10,
      filters: {
        types: [],
        minRating: 0
      },
      resultTypes: [
        { value: 'city', label: '城市' },
        { value: 'attraction', label: '景点' },
        { value: 'food', label: '美食' },
        { value: 'restaurant', label: '餐厅' }
      ],
      sortOptions: [
        { value: 'relevance', label: '相关度' },
        { value: 'rating', label: '评分' },
        { value: 'popularity', label: '热度' }
      ],
      // 模拟搜索结果数据
      searchResults: [
        {
          id: 1,
          type: 'city',
          title: '巴黎',
          description: '浪漫之都，艺术与文化的殿堂',
          image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          rating: 4.8,
          location: '法国'
        },
        {
          id: 2,
          type: 'attraction',
          title: '埃菲尔铁塔',
          description: '巴黎的标志性建筑，世界著名景点',
          image: 'https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          rating: 4.9,
          location: '巴黎, 法国'
        }
        // 更多搜索结果...
      ]
    }
  },
  computed: {
    filteredResults() {
      let results = this.searchResults.filter(result => {
        // 类型筛选
        if (this.filters.types.length > 0 && !this.filters.types.includes(result.type)) {
          return false
        }
        
        // 评分筛选
        if (result.rating < this.filters.minRating) {
          return false
        }
        
        return true
      })

      // 排序
      switch (this.sortBy) {
        case 'rating':
          return results.sort((a, b) => b.rating - a.rating)
        case 'popularity':
          return results.sort((a, b) => b.popularity - a.popularity)
        default:
          return results
      }
    },
    paginatedResults() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      return this.filteredResults.slice(start, start + this.itemsPerPage)
    },
    totalPages() {
      return Math.ceil(this.filteredResults.length / this.itemsPerPage)
    },
    pages() {
      const pages = []
      const start = Math.max(1, this.currentPage - 2)
      const end = Math.min(this.totalPages, start + 4)
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      return pages
    }
  },
  methods: {
    performSearch() {
      // 执行搜索逻辑
      console.log('搜索:', this.searchQuery)
    },
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
        window.scrollTo({ top: 0, behavior: 'smooth' })
      }
    },
    viewDetail(result) {
      // 根据类型跳转到不同详情页
      const routes = {
        city: `/city/${result.id}`,
        attraction: `/attraction/${result.id}`,
        food: `/food/detail/${result.id}`,
        restaurant: `/restaurant/${result.id}`
      }
      
      if (routes[result.type]) {
        this.$router.push(routes[result.type])
      }
    }
  },
  mounted() {
    // 从路由参数获取搜索关键词
    const query = this.$route.query.query
    if (query) {
      this.searchQuery = query
    }
  }
}
</script>

<style scoped>
.filter-group {
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 1rem;
}

.filter-group:last-child {
  border-bottom: none;
}

.page-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
</style>